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Flash MX deel 2/3 


POES ENTS ZELEE 


Interactieve animati 


In het eerste deel van deze driedelige cursus (Clickx Magazine 23) maakten we kennis met 
de beginselen van de animatie. In het tweede deel zetten we een stapje in de wereld van de 


interactie. We zullen gebruikmaken van maskers en knoppen. 


Een film met masker 


Om te beginnen maken we 
een nieuwe film en brengen 
we enkele wijzigingen aan: 
Fire, New. In het panel Pro- 
PERTIES zetten we de achter- 
grond op zwart en de afmetin- 
gen op 440 pixels breed en zoo 
pixels hoog. 

Met Texr Toor plaatsen we 
tekst op dezelfde laag. We kie- 
zen een duidelijk lettertype en 
zetten de stijl op ‘vet’. 


Document Properties 


Dimensions: (440 px (width) _ x 100 px (height) 


Match: | Printer | | Contents | | Default | 


Background Color: 
Frame Rate: 


Ruler Units: | Pixels 


Wijzig de standaardinstelling van 
een nieuw filmpje. 


4 ml ml Cl) 1 |t20fps| o0s € 5 
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De tekst komt op de eerste laag. 


We voegen een nieuwe laag toe door op het icoontje met het plus- 
teken te klikken. Deze laag noemen we ‘Spotlight’. Op deze laag 
tekenen we op het eerste frame een witte schijf. 


5 10 5 20 25 30 35 40 45 50 55 60 
DW achtergr.… Oe 
Eel Bt mol ml) 1 |eotps| oos € 
2 # 7 
& Scene 1 &. 4, 7 


De cirkel komt op de laag ‘Spotlight’. 
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Die schijf zetten 
we om tot een 
symbool, dat zich 
als graphic moet 
gedragen. 

Voorlopig maken 
we de animatie 


Convert to Symbol 


Name: Spotlight 


ooo 


Converteer de schijf tot symbool. 


Behavior. ©) Movie Clip Registration: ooo 


® Graphic 


vijftig frames lang. Daarom voegen we in beide lagen op laag 5o 


een keyframe toe 


: INSERT, KEYFRAME. 
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Vijftig frames is net iets meer dan 4 seconden. 


Op keyframe 50 zorgen we ervoor dat de witte schijf helemaal rechts 


staat. 
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Nu staat het zoeklicht rechts. 


Klik in de laag ‘Spotlight’ ergens tussen frame 1 en so en vraag in 
de PROPERTIES een TWEEN MOTION. 

Als je op de ENTER-toets drukt, merk je dat de witte schijf van links 
naar rechts schuift. 


VOOR GEVORDERDEN D D D 


HOEZO AN Floor? 


IK WACHT OP DE FLASH / 
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> CURSUS FLASH 
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| odt RE Control Window Help 


Layer… | 
Scene. Shift+F2 60 65 70 75 30 85 30 35 10 
=n 7 nn: 
Ï Frame Tween: =. veste | Sound. [None v @ 
Frame Lab Ease: 0 hd Effect: @® 
Rotate: |Auto  w Sync: [Event | Loop:|0 times @ Shape Ld 
Orient to path Sune []Snap No sound selected. EN 


Het zoeklicht beweegt dankzij een Motion Tween. 


Kik in de Timeline op keyframe 1, hou de muisknop ingedrukt en EE T 
sleep naar rechts totdat alle frames zijn geselecteerd. Kies daarna Arrange ’ 
Eprr, Cory FRAMES. gin à 


EE 


Synchronize Symbols 


eel 55 60 ZDA E Group CEG Convert ta Keyframes F6 @ 
spotlight “ Convert to Blank Keyframes F7 FP = @® 
B achteror.. £ * Break Apart Ctrl+B mie me 
Distribute to Layers Ctrl+Shift+D Sync: [Event | Loop: |D Hee € 
v 
iel @ tl wl MC 50 |t2otps| 44e £ ES S 
: Het zoeklicht moet heen en weer bewegen. 


Alle frames worden geselecteerd. : 
ken. We doen hetzelfde voor de onderliggende laag, maar daar 


Selecteer frame 51 in beide lagen en klik op Epir, PASTE FRAMES. selecteren we de optie MAsKED. Een masker wordt gebruikt om 
Hierdoor worden alle gekopieerde frames nog een keertje achter de inhoud van de onderliggende laag (die ‘masked’ is) te bedek- 


de vorige gezet. ' ken. Alle objecten 
Layer Properties 


die zich op de mas- 
TEE ® ä je 45 ä 55 60 65 70 75 Ei 5 30 95 100 105 [ey Kime: Spetlioht kerlaag bevinden, 
jpotlial lel td tn — 
zullen als een soort 
ül le) 
Cancel ji 
Show gat in het masker 
| mil ml gal so [ots | 4ts & Type: ®: Normal fungeren. Hier is 
O Guide : 
Alle gekopieerde frames worden nu geplakt. dat de bol die we 
De © Mask getekend hebben. 
Vervolgens selecteer je in beide lagen de frames vanaf 51 tot oo 
en kies je Mopiry, FRAMES, REVERSE. Door deze ‘omkeeropdracht’ O Folder 
zal de lichtcirkel van rechts naar links terugschuiven. Outline Color: BE p i 
c : ‚ : f 5 De bovenste laag 
Vervolgens maken we van de laag Spotlight een masker. We klik- [] View layer as outlines rs 
ken op de naam van deze laag en in Mopiry kiezen we LAYER. In Laver Heioht: [100% En 


het venster dat dan getoond wordt, kan je de optie MAsk aanklik- gemaskerd. 
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Controle en knoppen 


We testen de film: ConNrroL, Test, Movir en checken of de 
animatie naar wens verloopt. De letters komen te voorschijn in 
de cirkel, maar het lijkt niet alsof ze echt verlicht worden. Daar- 
om voegen we een nieuwe laag toe en slepen die onder de tekst- 
laag. Op deze laag tekenen we een lichtgrijs vlak. Wanneer we 
het filmpje opnieuw testen, merken we dat alles in orde is. 


EN Spotlioht . 
D achte. _ « 
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H: 105,2 


vel-24 DS 


122 items 


dn Circle Buttons 


GI circle button - previous 
Cg circle button - to beginning « 
< | 


@ 


In de 
Common 
Libraries 
zit klaar- 
gemaakt 
materiaal. 


Een grijs vlak laat de achtergrond oplichten. 


We voegen nu twee knoppen toe om de animatie 
te laten lopen en te laten stoppen. leder grafisch 
bestand kan dienstdoen als knop, maar voor deze 
gelegenheid maken 
we het ons superge- 
makkelijk en maken 
we gebruik van de bi- 
bliotheek met klaar- 
gemaakte knoppen: 
WINDow, COMMON 
LIBRARIES. 

We kiezen enkele 
exemplaren uit de collectie buttons. 
Die buttons zitten verzameld in een 
boekentasje. 

Door te dubbelklikken op het boe- 
kentasje CircLE BurroNs, worden <5 Step Back 
alle knoppen van deze groep ge- <5 Stop 
toond. We maken een nieuwe laag |» » < 
op de tijdlijn en slepen daar twee 
knoppen op: Stop en Pray. 


122 items 


Cg circle button - to beginning 
CJ circle button - to end 
GI Circle with arrow 


GJ Menu 


> 


Lg Rewind 


CI Step Ahead 


Met de knoppen kan je de 
animatie sturen. 


Nog dit over de knoppen 


Nog voor een mens kan lopen, is hij gefascineerd door het 
fenomeen ‘knop’. Van kindsbeen hebben we de illusie dat we 
met knoppen onze omgeving kunnen beheersen. Ook de bezoe- 
ker van onze site heeft met zo’n stel buttons de mogelijkheid om 
naar andere pagina’s over te gaan, geluiden af te spelen, of stil te 
zetten… Kortom: de gebruiker wordt voor een deel de bestuurder 
van onze presentatie. 

Er zijn drie soorten symbolen. Dat merk je als je het commando 
INSERT, NEw SYMBOL oproept. 
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Knoppen worden pas interessant als ze iets aansturen. Daar- 

om gaan we er nu een actie aan toekennen. Klik op de knop 

Pray die zich op de Sragr bevindt en roep daarna het venster Ac- 

TIONS op: WINDOW, ACTIONS. De ACTION SCRIPTS worden gegroe- 
peerd in verschillende ‘boekjes’. 


ke Actions for [Mo instance name assigned] (Play) 


3) Actions 


€) Movie Control 

B goto 

@D en 

@ play 

@D stop 

@® stopAllSounds 
Browserihletwork 
Movie Clip Control 
Variables 
ConditionstLoops 


Printing 


play : Start playing the movie 


No Parameters. 


on (release) { 


play{); 


Line 2: play); 


We voegen een actie aan de knoppen toe. 


In de groep Movie CoNrroL treffen we de actie PLAY aan. Ter- 
wijl de knop nog steeds geselecteerd is, dubbelklikken we op de 
actie PLAY. Daarna dubbelklikken we op de knop Stop en selec- 
teren we de actie Srop die ook bij de Movie CONTROL ACTIONS 
staat. 


À Buttonbanner - Microsoft Internet Explorer - [Off line werken] 


Bestand Bewerken Beeld Favorieten Extra Help 


REKER KK: zi 


Adres Kl C:\Documents and Settings\Clickx Magazine\Mijn documenten\Mijn afbeeldingen\Dirk\Buttonbanr « | Ga naar 


4 Deze computer 


De animatie is klaar. 


Ziezo, onze interactieve banner is klaar. Indien je het filmpje wil 
testen via CONTROL, TEST MOvIE moeten we er zeker op letten dat 
in hetzelfde menu het item ENABLE SIMPLE BUTTONS geactiveerd 
is. Een andere manier om de zaak te testen is via FILE, PUBLISH 
PREVIEW, DEFAULT, HTML of Fra. 


Convert to Symbol 


Name: 


Behavior: (©) Movie Clip 
O Button 
O Graphic 


Registration: Go 


Drie soorten symbolen. 


» Een GRAPHIC (afbeelding): dit type wordt het meeste gebruikt om- 
dat we er bijvoorbeeld verrassende Motion Tweenings mee kun- 
nen maken. 

+ Een Movie Cure (filmsequentie): dat hebben we in deze site ge- 
bruikt voor de opflitsende logo's. Zo’n filmsequentie is een ani- 
matie in een animatie. 

Een BUTTON (opdrachtknop): met de opdrachtknop kan de be- 
zoeker de pagina of de film interactief besturen. 

Het is eenvoudig om zelf knoppen te maken. Buttons zijn niet meer 
of minder dan interactieve filmclips die uit vier frames bestaan. 
ledere keer dat je in de 
SYMBOL PROPERTIES aan- 
duidt dat het symbool een 
button moet worden, zal 
Flash automatisch een ti- 
meline voorhouden met 
vier cellen. Afhankelijk 
van hetgeen de bezoeker 
met de muis doet, springt 
de afspeelknop naar één 
van deze vier frames. De 
timeline zal bijgevolg niet 
chronologisch afgespeeld 
worden; de afspeelknop 
reageert rechtstreeks op 
de muisgebeurtenis. 


Hmmm cl + [gors on € 


ETC 


De Up-state. 


In het eerste frame, de Up-STATE, teken je de knop zoals die er moet 
uitzien wanneer de muisaanwijzer zich er niet boven bevindt. Let 
op het centreerkruisje. Dat is een hulpmiddel om de drie volgen- 
de knopstaten precies op elkaar te positioneren. 

De OVER-STATE is wat de bezoeker te zien krijgt wanneer hij met de 
muisaanwijzer over de knop gaat. In dit voorbeeld zal de knop oran- 
je oplichten. 


FP Layer: Text 
WD Layer: Ar. 
W Layer: Ci 


De Over-state. 
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De DOWN-STATE wordt 


weergegeven zolang 


Pj Layer: Ar. 
LW Layer: Ci. 


de knop wordt inge- 
drukt. Meestal is dat 
een erg kort moment. 
Met de Hrr-stAre leg je 


het actieve gebied van 
de knop vast. Je kan dit 
frame probleemloos 
leeg laten, dan zal de 
hele opdrachtknop re- 
ageren op de muisklik. 
De afbeelding die je in 
het Hit-frame plaatst, 
hoeft niet gedetailleerd 
te zijn. Een zwart vlak 
dat de actieve zone 
aanduidt, volstaat. De gebruiker zal het plaatje in dit frame niet te 
zien krijgen. Hier merk je dat de knop al geactiveerd wordt vanaf 
het moment dat de bezoeker de muisaanwijzer rechts van de ron- 
de knop houdt. 

Uiteraard hoef je een knop niet helemaal zelf te ontwerpen. In deze 


De Down-state. 


Knoppen en klikjes 


Knoppen moeten op zijn minst klikken, dus zullen we geluiden 
toevoegen. Hiervoor maak je gebruik van de bestanden uit de ge- 
luidsbibliotheek: WiNpow, COMMON LIBRARIES, SOUNDS of im- 
porteer je een of andere geluidsfile met de IMPoRT-functie. 
Uiteraard heeft het geen zin om voor iedere knopstaat een ge- 
luid in te voeren. Daartoe gaan we opnieuw naar de Epir SyM- 
BOLS-modus van de klaargemaakte knop. Wanneer we willen dat 
een gezoem klinkt wanneer men met de muisaanwijzer over de 
knop gaat, klikken we op de Over-staat van de button en slepen 
we een zoemend geluid op de stage. Pietjes Precies zullen in deze 
bewerkmodus een aparte laag aanmaken om het geluid van die 
knop te organiseren. Hier zie je hoe we een geluid laten zoemen 
op het moment dat de muis over de knop gaat en een ander ge- 
luid (Switch Push) klinkt wanneer de knop wordt ingedrukt. 

In de standaardinstelling zal Flash de rollover-kenmerken van 
knoppen niet tonen terwijl je in de filmbewerkingsmodus werkt. 
Dat is logisch, probeer maar eens met het pijltje (Arrow Toor) 


Ld 


5 Stick Hit 

«Is Switch Box 

«]. Switch Camera On 
<1< Switch Push 


Geluid toevoegen aan knoppen. 
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les maken we gebruik van 


een exemplaar van de 
reeks buttons die mee 
werd geïnstalleerd in 
Macromedia Flash MX. Je lo: 
vindt de verschillende … gem 


W Layer: Ar. 
WJ Layer: Ci 


4 [t20fpsl 03s € | 


klaargemaakte sets in de 
COMMON LIBRARIES, BUT- 
TONs onder het menu- 
item Winpow. Bovendien 
staan er op het web tal van 
sites waar je zulke klaar- 
gemaakte knoppen af 
haalt. Om een voorge- 
maakte knop te gebrui- 
ken, sleep je die naar de 
STAGE van je film. Hier- De Hit-state. 

door wordt die meteen opgenomen in de bibliotheek van de ani- 
matie. Daar kan je de gewenste grootte en vorm verder aanpassen 
en wanneer je dubbelklikt op deze button, kom je in de Eprr SyM- 
BOLS-modus, waar je de basisvorm van dit symbool rechtstreeks 
kan wijzigen. 


122 items 


zo’n knop te verplaatsen terwijl die con- 
stant reageert op je muisaanwijzer. le- 
dere keer dat je hem probeert te selec- 
teren, zal die de Over- en DowN-frames 
tonen. Om gek te worden. Daarom wor- 
den die knoppen automatisch (voorlo- 
pig) op non-actief gezet. Wil je de wer- 
king van de knoppen in deze modus be- 
kijken, dan activeer je ze via het menu 
CONTROL, ENABLE SIMPLE BUTTONS. Je 
krijgt eveneens een preview van de Ur-, 
Down en OveEr-frames door deze but- 
ton te selecteren in de bibliotheek en 
vervolgens op de afspeelknop van het magen 

voorvertoningvenster te klikken. EES 

— Dirk Schoofs — | ove 


GJ Oval buttons - blue 
GJ Oval buttons - green 
ee #8 ï 


El Fader - gain 
(Ei fader - mixer 
(| Fader - round 


De knoppenbibliotheek. 


VOLGENDE KEER 
IN DE DOE HET ZELF RUBRIEK: 


» Beveilig je Excel-bestanden 
e Maak een back-up van je internet- 


en Outlook-instellingen 
° Zo vermijd je spamming 
» Een flitsende site met Flash MX 


